<template>
  <el-table v-loading="loading" :data="tableData" stripe>
    <el-table-column type="index" label="序号" align="center" />
    <el-table-column prop="historicProcessInstance.processDefinitionName" label="流程名称" />
    <el-table-column prop="historicProcessInstance.processDefinitionId" label="流程编号" width="250" />
    <el-table-column prop="historicProcessInstance.processInstanceId" label="流程实例" />
    <el-table-column prop="userName" label="发起人" />
    <el-table-column label="开始时间">
      <template slot-scope="scope">{{scope.row.historicProcessInstance.startTime | dateFormat }}</template>
    </el-table-column>
    <el-table-column label="结束时间">
      <template slot-scope="scope">{{scope.row.historicProcessInstance.endTime | dateFormat }}</template>
    </el-table-column>
    <el-table-column label="耗时">
      <template
        slot-scope="scope"
      >{{scope.row.historicProcessInstance.endTime | dateDifference(scope.row.historicProcessInstance.startTime)}}</template>
    </el-table-column>
    <el-table-column label="操作" width="70">
      <template slot-scope="scope">
        <el-button type="primary" @click="$emit('detail-click', scope.row)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    loading: {
      type: Boolean,
      required: true,
      default: () => false
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-table
  margin-top 20px
</style>
